<template>
  <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
    <el-tab-pane label="土壤侵蚀强度" name="first">
      <div style="position: relative;
      width: 100%;
      height: 11rem;
      display: flex;
       justify-content:center;
       align-items:Center;"
      >
      <el-image :src ="src1"
                style="width: 90%; height: 90%"
                fit='contain'/>
      </div>
    </el-tab-pane>

    <el-tab-pane label="降雨侵蚀力" name="second">
      <div style="position: relative;
      width: 100%;
      height: 11rem;
      display: flex;
       justify-content:center;
       align-items:Center;"
      >
        <el-image
          :src ="src2"
          fit='contain'
          style="width: 90%; height: 90%"
        />
      </div>
    </el-tab-pane>

    <el-tab-pane label="土壤侵蚀性" name="third">
      <div style="position: relative;
      width: 100%;
      height: 11rem;
      display: flex;
       justify-content:center;
       align-items:Center;"
      >
        <el-image :src ="src3"
                  style="width: 90%; height: 90%"
                  fit='contain'/>
      </div>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
export default {
  data() {
    return {
      activeName: 'first',
      src1: require("./soilErosion/soilErosion1.png"),
      src2: require("./soilErosion/soilErosion2.png"),
      src3: require("./soilErosion/soilErosion3.png")
    };
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    }
  }
};
</script>

<style scoped>

</style>
